<template>
	<view class="post-detail">

		<view class="info">
			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#2c2c2c">
				</uni-icons>
				<uni-icons @click="toSharePost" style="margin-right: 40rpx;" type="more-filled" size="30" color="#2c2c2c"></uni-icons>
			</view>



			<view class="post">
				<userInfoCard :userInfo="postInfo.userInfo" :themeColor="islandInfo.theme"></userInfoCard>
				<view style="margin-top: 30rpx;" v-html="getTextWithLine(postInfo.content)"></view>
				<view class="pictures" v-if="postInfo.pictures && postInfo.pictures.length > 0">
					<view v-for="(picture,pictureIndex) in postInfo.pictures" class="picture"
						:style="{'margin-right' : (pictureIndex+1)%3 == 0 ? '' :'10rpx'}"
						@tap="ViewImage(postInfo.pictures,picture)">
						<image mode="aspectFill" :src="picture" />
					</view>
				</view>
				
				<view class="links" v-if="postInfo.links && postInfo.links.length > 0" >
					<view class="link" v-for="(item,index) in postInfo.links" @click="toLinkLocation(item.link)">
						<uni-icons type="link" size="30" color="#A6A6A6"></uni-icons>
						<view style="margin-left: 20rpx;">{{item.title}}</view>
					</view>
				</view>


				<view class="post-bottom">

					<view class="date">{{postInfo.gmtCreate}}</view>

					<view class="post-buttons">
						

						<view class="footer-item" v-if="postInfo.isLike">
							<view class="footer-button" @click="likeOrCancelPost()">
								<uni-icons type="heart" size="22" :style="{'color' : islandInfo.theme}"></uni-icons>
							</view>
							<view class="text" :style="{'color' : islandInfo.theme}">{{postInfo.likeCount}}</view>
						</view>
						<view class="footer-item" v-else>
							<view class="footer-button" @click="likeOrCancelPost()">
								<uni-icons type="heart" size="22" color="#c3c3c3"></uni-icons>
							</view>
							<view class="text">{{postInfo.likeCount}}</view>
						</view>
						
						<view class="footer-item">
							<view class="footer-button" @click="clearCommentInput()">
								<uni-icons type="chatbubble" size="25" color="#c3c3c3"></uni-icons>
							</view>
							<view class="text">{{commentPage.total}}</view>
						</view>

						<view class="footer-item" v-if="postInfo.isMine">
							<view class="footer-button" @click="toEditPost()">
								<uni-icons type="compose" size="25" color="#c3c3c3"></uni-icons>
							</view>
						</view>
					</view>
				</view>

			</view>



			<view style="background-color: #f9f9f9;">
				<view class="post-comments" v-if="comments != null && comments.length > 0">

					<view class="post-comments-query">
						<span style="font-weight: bold;font-size:36rpx;">全部评论</span>（{{comments.length}}条）
					</view>

					<view v-for="(comment,commentIndex) in comments">

						<view class="post-comment" style="background-color:#FFFFFF;" v-if="comment.isMine">
							<view class="comment-top">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<view class="avatar">
										<image mode="aspectFill" :src="comment.userInfo.avatar"></image>
									</view>
									<view class="nickname">{{comment.userInfo.nickname}}</view>
								</view>
								<uni-icons @click="toBackPage" type="more-filled" size="20" color="#c8c8c8">
								</uni-icons>
							</view>
							<view style="width: 590rpx;margin-left: 80rpx;">{{comment.content}}</view>


							<view class="comment-bottom">
								<view class="date">{{comment.gmtCreate}}</view>
								<view class="buttons">
									
									<view class="footer-item" v-if="comment.isLike">
										<view class="footer-button" @click="likeOrCancelComment(commentIndex)">
											<uni-icons type="heart" size="22" :style="{'color' : islandInfo.theme}"></uni-icons>
										</view>
										<view class="text" :style="{'color' : islandInfo.theme}">{{comment.likeCount}}</view>
									</view>
									<view class="footer-item" v-else>
										<view class="footer-button" @click="likeOrCancelComment(commentIndex)">
											<uni-icons type="heart" size="22" color="#c3c3c3"></uni-icons>
										</view>
										<view class="text" style="color: #c3c3c3;">{{comment.likeCount}}</view>
									</view>
									
									<view class="footer-item">
										<view class="footer-button" @click="beginAddReply(commentIndex)">
											<uni-icons type="chatbubble" size="25" color="#c3c3c3"></uni-icons>
										</view>
									</view>
								</view>
							</view>
							<view @click="toCommentDetail(comment.id)" class="comment-replies" v-if="comment.replies != null && comment.replies.length > 0">
								<view v-for="(reply,index) in comment.replies">
									<span style="font-weight: bold;color: #c3c3c3;">{{reply.nickname}}</span>
									<span style="margin: 0 10rpx;display: inline-block;">回复</span>
									<span style="font-weight: bold;color: #c3c3c3;">{{reply.toNickname}}</span>
									<span style="margin: 0 10rpx;display: inline-block;">:</span>
									<span>{{reply.content}}</span>
								</view>
							</view>
						</view>


						<view class="post-comment" v-else>
							<view class="comment-top">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<view class="avatar">
										<image mode="aspectFill" :src="comment.userInfo.avatar"></image>
									</view>
									<view class="nickname">{{comment.userInfo.nickname}}</view>
								</view>
								<uni-icons @click="toBackPage" type="more-filled" size="20" color="#c8c8c8">
								</uni-icons>
							</view>
							<view style="width: 590rpx;margin-left: 80rpx;">{{comment.content}}</view>
							
							<view class="comment-bottom">
								<view class="date">{{comment.gmtCreate}}</view>
								<view class="buttons">
									<view class="footer-item" v-if="comment.isLike">
										<view class="footer-button" @click="likeOrCancelComment(commentIndex)">
											<uni-icons type="heart" size="22" :style="{'color' : islandInfo.theme}"></uni-icons>
										</view>
										<view class="text" :style="{'color' : islandInfo.theme}">{{comment.likeCount}}</view>
									</view>
									<view class="footer-item" v-else>
										<view class="footer-button" @click="likeOrCancelComment(commentIndex)">
											<uni-icons type="heart" size="22" color="#c3c3c3"></uni-icons>
										</view>
										<view class="text">{{comment.likeCount}}</view>
									</view>
									<view class="footer-item">
										<view class="footer-button" @click="beginAddReply(commentIndex)">
											<uni-icons type="chatbubble" size="25" color="#c3c3c3"></uni-icons>
										</view>
									</view>
								</view>
							</view>
							<view @click="toCommentDetail(comment.id)" class="comment-replies" v-if="comment.replies != null && comment.replies.length > 0">
								<view v-for="(reply,index) in comment.replies">
									<span style="font-weight: bold;color: #c3c3c3;">{{reply.nickname}}</span>
									<span style="margin: 0 10rpx;display: inline-block;">回复</span>
									<span style="font-weight: bold;color: #c3c3c3;">{{reply.toNickname}}</span>
									<span style="margin: 0 10rpx;display: inline-block;">:</span>
									<span>{{reply.content}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="comment-input" :style="{ 'margin-bottom' : isFocus ? '30rpx' : '0' }">
			<view class="content" :style="{ height:commentAddInput.lineCount*40+'rpx' }">
				<textarea style="width: 100%;margin-bottom: 10rpx;margin-top: 10rpx;max-height: 400rpx;overflow: scroll;"
					@linechange="lineChange"
					:style="{ height:commentAddInput.lineCount*40+'rpx' }"
					:show-confirm-bar="false"
					:placeholder="commentAddInput.toName" 
					:focus="commentAddInput.focus"
					v-model="commentAddInput.content"/>
			</view>
			<view style="color: gray;" @click="addComment()">发送</view>
		</view>
	</view>
</template>

<script>
	import userInfoCard from '@/components/user-info-card.vue'
	export default {
		components: {
			userInfoCard
		},
		watch: {
			keyHei(val) {
				console.log('keyHei change!', val)
				if (val) {
					this.isFocus = true
				} else {
					this.isFocus = false
				}
			},
		},
		data() {
			return {
				islandInfo: {},
				isFocus:false,
				placeholderData:"书写你的赞美",
				commentAddInput: {
					toName: "书写你的赞美",
					lineCount:1,
					content: "",
					isreply: false,
					visibility: 2,
					postId: null,
					commentIndex: 0,
					commentId: null,
					focus:false
				},


				postInfo: {
					userInfo: {
						avatar: "https://img.ixintu.com/download/jpg/20210209/9e842a3dbf66252db019066904662f47_512_512.jpg!bg"
					}
				},
				comments: [],
				commentPage: {
					pageSize: 20,
					pageNow: 1,
					visibility: 2,
					islandId: "",
					total: 0,
				},

				paddingTop: null
			}
		},
		onLoad(options) {
			if (options.islandId) {
				this.islandInfo.id = options.islandId
				this.getIslandInfo()
			}

			if (options.postId) {
				this.postInfo.id = options.postId
				this.commentPage.postId = options.postId
				this.getPostInfo()
				this.pagePostComment()
			}

			
			// #ifdef MP-WEIXIN
			// 调整顶部位置
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			const menuButton = uni.getMenuButtonBoundingClientRect();
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif


		},
		methods: {
			getIslandInfo() {
				this.$api.getIslandInfo({
					id: this.islandInfo.id
				}).then(res => {
					this.islandInfo = res.data
				})
			},

			getPostInfo() {
				this.$api.getPostInfo({
					id: this.postInfo.id
				}).then(res => {
					this.postInfo = res.data

					this.commentAddInput = {
						content: "",
						isReply: false,
						postId: this.postInfo.id,
						commentIndex: 0,
						commentId: null,
						toName: "书写你的赞美",
						focus:false
					}
				})
			},

			pagePostComment() {
				this.$api.pagePostComment(this.commentPage).then(res => {
					this.commentPage.total = res.data.totalPage
					this.comments = res.data.rows
					console.log("评论", this.comments)
				})
			},

			beginAddReply(commentIndex) {
				console.log("回复", this.comments[commentIndex])
				this.commentAddInput = {
					toName: "回复：" + this.comments[commentIndex].userInfo.nickname,
					content: "",
					isReply: true,
					postId: this.postInfo.id,
					commentIndex: commentIndex,
					commentId: this.comments[commentIndex].id,
					focus:true
				}
			},
			clearCommentInput(){
				this.commentAddInput = {
					content: "",
					isReply: false,
					postId: this.postInfo.id,
					commentIndex: 0,
					commentId: null,
					toName: "书写你的赞美",
					focus:false
				}
			},

			deletePost() {
				uni.showModal({
					title: '提示',
					content: '确定删除本条帖子吗？',
					success(res) {
						if (res.confirm) {
							this.$api.likeOrCancelPost({
								id: this.postInfo.id
							}).then(res => {
								uni.navigateBack()
							})
						}
					}
				});
			},

			toReportPost() {
				uni.showModal({
					title: '提示',
					content: '确定举报本条帖子吗？',
					success(res) {
						if (res.confirm) {
							uni.showModal({
								title: "举报成功"
							})
						}
					}
				});
			},

			toReportComment() {
				uni.showModal({
					title: '提示',
					content: '确定举报本条评论吗？',
					success(res) {
						if (res.confirm) {
							uni.showModal({
								title: "举报成功"
							})
						}
					}
				});
			},

			likeOrCancelPost() {
				this.$api.likeOrCancelPost({
					id: this.postInfo.id
				}).then(res => {
					if (this.postInfo.isLike) {
						this.postInfo.likeCount--
						this.postInfo.isLike = false
					} else {
						this.postInfo.likeCount++
						this.postInfo.isLike = true
					}
				})
			},
			
			likeOrCancelComment(index) {
				this.$api.likeOrCancelComment({
					commentId: this.comments[index].id
				}).then(res => {
					if (this.comments[index].isLike) {
						this.comments[index].likeCount--
						this.comments[index].isLike = false
					} else {
						this.comments[index].likeCount++
						this.comments[index].isLike = true
					}
				})
			},
			
			lineChange(e){
				this.commentAddInput.lineCount = e.detail.lineCount
				this.$forceUpdate()
			},



			addComment() {
				if(this.commentAddInput.content == ""){
					uni.showModal({
						title:"提示",
						content:"内容不能为空"
					})
					return
				}
				if (this.commentAddInput.isReply) {
					this.$api.addReply({
						toId: this.comments[this.commentAddInput.commentIndex].userInfo.id,
						postCommentId: this.commentAddInput.commentId,
						content: this.commentAddInput.content
					}).then(res => {
						this.comments[this.commentAddInput.commentIndex].replies.push(res.data)

						this.commentAddInput = {
							content: "",
							isReply: false,
							postId: this.postInfo.id,
							commentIndex: 0,
							commentId: null,
							toName: "书写你的赞美",
						}
					})
				} else {
					this.$api.addComment({
						postId: this.postInfo.id,
						islandId: this.islandInfo.id,
						content: this.commentAddInput.content
					}).then(res => {
						this.comments.unshift(res.data)

						this.commentAddInput = {
							content: "",
							isReply: false,
							postId: this.postInfo.id,
							commentIndex: 0,
							commentId: null,
							toName: "书写你的赞美",
						}
					})
				}

			},

			ViewImage(pictures, url) {
				uni.previewImage({
					urls: pictures,
					current: url
				});
			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			toCommentDetail(commentId) {
				uni.navigateTo({
					url: "/pages_being/island/post-comment-detail?postId=" + this.postInfo.id+"&commentId="+commentId
				})
			},
			toEditPost() {
				uni.navigateTo({
					url: "/pages_being/island/post-create?postId=" + this.postInfo.id
				})
			},
			toAddPost() {
				uni.navigateTo({
					url: "/pages_being/island/post-create?islandId=" + this.islandInfo.id
				})
			},
			toLinkLocation(url) {
				uni.navigateTo({
					url
				})
			},
			
			getTextWithLine(text){
				if(text){
					return text.split("\n").join("<br>");
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.post-detail {

		.top-background {
			position: fixed;
			z-index: 1;

			width: 100%;
			height: 450rpx;

			background-repeat: no-repeat;
			background-size: cover;


			.mask {
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0rpx;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.5)0%, rgba(67, 72, 92, 0)100%);
				z-index: 2;
			}
		}

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;

			padding-bottom: 120rpx;




			.back-arrow {
				width: 100%;

				//#ifdef MP-WEIXIN
				width: 550rpx;
				//#endif

				padding-top: 100rpx;

				// #ifdef H5
				padding-top: 40rpx;
				// #endif

				height: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.post {
				width: 670rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				margin-left: 40rpx;
				margin-top: 60rpx;
				margin-bottom: 30rpx;

				.pictures {
					display: flex;
					flex-direction: row;
					margin: 30rpx 0 20rpx 0;

					width: 100%;
					flex-wrap: wrap;

					.picture {
						width: 210rpx;
						height: 210rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}
				}
				
				.links{
					display: flex;
					flex-direction: column;
					width: 670rpx;
					margin: 20rpx 0;
					
					.link{
						width: 610rpx;
						padding: 30rpx;
						margin-bottom: 20rpx;
						border-radius: 20rpx;
						background-color: #F5F6F8;
						
						display: flex;
						flex-direction: row;
						align-items: center;
						
					}
				}



				.post-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.date {
						font-size: 28rpx;
						color: gray;
					}

					.post-buttons {
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						align-items: center;
						
						
						.footer-item {
							margin-left: 40rpx;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
						
							.text {
								font-size: 28rpx;
								color: #c3c3c3;
								margin-left: 10rpx;
							}
						
							.footer-button {
								height: 60rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								border-radius: 50rpx;
								color: white;
							}
						}
					}

				}

			}



			.post-comments {
				display: flex;
				flex-direction: column;
				padding-bottom: 100rpx;
				background-color: #FFFFFF;
				margin-top: 20rpx;

				.post-comments-query {
					width: 670rpx;
					margin-left: 40rpx;
					margin-top: 30rpx;
				}


				.post-comment {
					width: 670rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;
					margin-left: 40rpx;
					margin-top: 40rpx;

					.comment-top {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: flex-start;

						.avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							overflow: hidden;
						}


						.nickname {
							margin-left: 20rpx;
							font-weight: bold;
						}


					}





					.avatar {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
					}


					.comment-bottom {
						width: 590rpx;
						margin-top: 10rpx;
						margin-left: 80rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.date {
							font-size: 28rpx;
							color: gray;
						}

						.buttons {
							display: flex;
							flex-direction: row;
							justify-content: flex-end;

							.footer-item {
								margin-left: 20rpx;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.text {
									font-size: 28rpx;
									margin-left: 10rpx;
									color: #c3c3c3;
								}

								.footer-button {
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
								}
							}
						}




					}

					.comment-replies {
						width: 550rpx;
						margin-left: 80rpx;
						border-radius: 20rpx;
						padding: 20rpx;
						margin-top: 20rpx;
						background-color: #FAFAFA;
					}
				}
			}

		}


		.comment-input {
			width: 100%;
			background-color: #ffffff;

			position: fixed;
			z-index: 2;
			bottom: 0;


			display: flex;
			flex-direction: row;
			align-items: center;


			padding: 30rpx 10rpx;
			border-top: 1px solid #d5d5d5;


			.content {
				margin-right: 30rpx;
				border: 1rpx solid #d5d5d5;
				border-radius: 10rpx;
				
				width: 560rpx;
				margin-left:20rpx;
				max-height: 420rpx;
				
				
				padding: 20rpx;
				height: 40rpx;


				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

		.page-btns {
			display: flex;
			position: fixed;
			right: 100rpx;
			bottom: 100rpx;
			z-index: 10;


			.button {
				width: 90rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgba(240, 240, 240, 1.0);
				border-radius: 50rpx;
				color: white;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
